<template>
  <div id="NewTemplate">
    <el-page-header @back="goBack" content="新建模板"></el-page-header>
    <el-divider></el-divider>
    <div class="center">
      <div class="theme">
        <div class="docName" style="margin-right: 50px">
          <label>设置模板名称：</label>
          <el-input v-model="input" placeholder="请输入模板名称" style="width: 470px"></el-input>
        </div>
        <div class="typeface" style="margin-right: 50px">
          <label>设置文档字体：</label>
          <el-popover
              placement="right"
              width="400"
              trigger="click">
            <ul class="fonts">
              <li v-for="(tiem,index) in fontstyle"
                  :style="'font-family: '+tiem+';'" :key="index"
              @click="allfontstyle=tiem">点击选择字体-{{tiem}}</li>
            </ul>
            <el-button slot="reference">{{allfontstyle}}</el-button>
          </el-popover>
        </div>
        <div class="typeface">
          <label>设置正文字号：</label>
          <el-popover
              placement="right"
              width="400"
              trigger="click">
            <ul class="fonts">
              <li v-for="(tiem,index) in fontssize"
                  :style="'font-size: '+tiem.size+'px;'" :key="index"
                  @click="allfontssize=tiem.name">{{tiem.name}}</li>
            </ul>
            <el-button slot="reference">{{allfontssize}}</el-button>
          </el-popover>
        </div>
        <div class="titleStyle">
          <label>设置标题样式：</label>
          <el-button type="primary" size="medium" @click="addlist">添加</el-button>
          <ul class="titleStyleUl">
            <li v-for="(items,indexs) in title" :key="indexs">
              <el-radio-group v-model="items.grade" size="medium" style="margin-right: 20px">
                <el-radio-button label="一级标题" ></el-radio-button>
                <el-radio-button label="二级标题"></el-radio-button>
                <el-radio-button label="三级标题"></el-radio-button>
                <el-radio-button label="四级标题"></el-radio-button>
              </el-radio-group>
              <el-popover
                  placement="right"
                  width="400"
                  trigger="click">
                <ul class="fonts">
                  <li v-for="(tiem,index) in fontssize"
                      :style="'font-size: '+tiem.size+'px;'" :key="index"
                  @click="items.fontsizes = tiem.name">{{tiem.name}}</li>
                </ul>
                  <el-button slot="reference" size="medium">
                    {{items.fontsizes==''?'点击按钮选择字号':items.fontsizes}}
                  </el-button>
              </el-popover>
              <el-input v-model="items.texts" placeholder="请输入标题内容" size="medium" class="titleInput"></el-input>
              <div class="titleDel"><i class="el-icon-delete"></i></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "NewTemplate",
    data(){
      return {
        allfontstyle:'点击按钮选择字体',
        allfontssize:'点击按钮选择字号',
        fontstyle:['黑体','仿宋','微软雅黑','楷体','YouYuan','宋体'],
        fontssize:[{name:'初号',size:'42'},{name:'小初',size:'36'},{name:'一号',size:'26'},{name:'小一',size:'24'},
          {name:'小二',size:'18'},{name:'三号',size:'16'},{name:'小三',size:'15'},{name:'四号',size:'14'},{name:'小四',size:'12'}],
        radio2:'',
        title:[
          {
            grade:'',
            fontsizes:'',
            texts:'',
            values:''
          },
          {
            grade:'',
            fontsizes:'',
            texts:'',
            values:''
          },
          {
            grade:'',
            fontsizes:'',
            texts:'',
            values:''
          }
        ],
        modID:''
      }
    },
    methods:{
      goBack() {
        this.$router.go(-1)
      },
      addlist(){
        var a = {
          grade:'',
          fontsizes:'',
          texts:'',
          values:''
        }
        this.title.unshift(a)
        console.log(this.title)
      }
    },
    mounted() {
      let id = this.$route.query.id;
      if (typeof id == 'undefined'){
        this.modID = '';
      }else{
        this.modID = id;
      }
    }
  }
</script>

<style scoped>
  #NewTemplate{
    box-sizing: border-box;
    padding: 40px 20px;
  }
  .theme{
    width: 100%;
    padding: 10px;
    text-align: left;
  }
  .fonts{
    font-size: 28px;
  }
  .fonts li{
    padding: 0 10px;
  }
  .fonts li:hover{
    background: #E7ECF0;
    cursor: pointer;
  }
  .typeface{
    display: inline-block;
  }
  .titleStyle{
    margin-top: 50px;
  }
  .titleStyleUl{
    width: 100%;
    margin-top: 20px;
    position: relative;
  }
  .titleStyleUl > li{
    max-width: 655px;
    position: relative;
    padding: 20px;
    border-bottom: 2px solid #DAD8D8;
  }
  .titleInput{
    width: 100%;
    max-width: 563px;
    margin-top: 10px;
  }
  .titleDel{
    width: 81px;
    height: 81px;
    line-height: 81px;
    text-align: center;
    position: absolute;
    right: 20px;
    top: 20px;
    border: 1px solid #DCDFE6;
    font-size: 30px;
    cursor: pointer;
    border-radius: 4px;
    color: #C0C4CC;
  }
  .titleDel:hover{
    color: #ff7800;
    border: 1px solid #ff7800;
  }
  .docName{
    width: 100%;
    margin-bottom: 20px;
  }
</style>